<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 10px auto;
			text-align: center;
			color: blue;
		}
		img{
			display: block;
		}
		img.lazy{
			min-height: 300px;
			background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547889938309&di=052c2e49d0d459ab463b395b3aa88b17&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01412b5a113d83a80121985c87590c.gif) center center no-repeat ;
      background-size: contain;
		}
	</style>
</head>
<body>
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547886137731&di=2704f41546ab496422967d6ba04b0a3b&imgtype=0&src=http%3A%2F%2Fpic42.photophoto.cn%2F20170104%2F0011034468692331_b.jpg" width="80%" alt="">
	<p><<<<<<<<<<<<<<<<<<<<<<<<图片懒加载>>>>>>>>>>>>>>>>>>>>>></p>
	<p><<<<<<<<<<<<<<<<<<<<<<<<图片懒加载>>>>>>>>>>>>>>>>>>>>>></p>
	<p><<<<<<<<<<<<<<<<<<<<<<<<图片懒加载>>>>>>>>>>>>>>>>>>>>>></p>
	<p><<<<<<<<<<<<<<<<<<<<<<<<图片懒加载>>>>>>>>>>>>>>>>>>>>>></p>
	<img class="lazy" src="" origin="http://axuebin.com/lazyload/img/img1.png" alt="">
	<img class="lazy" src="" origin="http://axuebin.com/lazyload/img/img2.png" alt="">
	<img class="lazy" src="" origin="http://axuebin.com/lazyload/img/img3.png" alt="">
	<img class="lazy" src="" origin="http://axuebin.com/lazyload/img/img4.png" alt="">
	<img class="lazy" src="" origin="http://axuebin.com/lazyload/img/img5.png" alt="">
	<img class="lazy" src="" origin="http://axuebin.com/lazyload/img/img6.png" alt="">
	<img class="lazy" src="" origin="http://axuebin.com/lazyload/img/img7.png" alt="">
	<img class="lazy" src="" origin="http://axuebin.com/lazyload/img/img8.png " alt="">
	<img class="lazy" src="" origin="http://axuebin.com/lazyload/img/img9.png " alt="">
	<img class="lazy" src="" origin="http://axuebin.com/lazyload/img/img10.png " alt="">

</body>
<script>

	
	window.onload = function lazyload(){
	  var imgList = Array.from(document.querySelectorAll('img.lazy'));
	  var btn = Array.from(document.querySelectorAll('button'));
	  var timer=false;
	  document.addEventListener('scroll',delay)

    //去抖动
	  function delay(){
			clearTimeout(timer)
			timer = setTimeout(()=>{
				load()
			},300)
			console.log('监听中')
		}
    //加载图片
		function load(){
			imgList.forEach((item,index)=>{
				if(item.offsetTop<document.documentElement.clientHeight+document.documentElement.scrollTop){
					item.setAttribute('src',item.getAttribute('origin'));
					destory.call(this,index)
				}
			})
			console.log('去抖动中');
		}

		// 完成后销毁
		function destory(index){
			imgList.splice(index,1)
			if(imgList.length==0){
			  document.removeEventListener('scroll',delay);
			}
		} 
	}

var a = {
  age:20
}
var b={}
b=a;


  
  
  // const c = new foo()

  


	// 	var imgList = Array.from(document.querySelectorAll('img.lazy'));
	// var btn = Array.from(document.querySelectorAll('button'));

		// var timer=false;
		// var delayidx = false;
		// document.addEventListener('scroll',lazyload)
		// function lazyload(){
		// 	clearTimeout(timer)
		// 	timer = setTimeout(()=>{
		// 		imgList.forEach((item,index)=>{
		// 			if(item.offsetTop<document.documentElement.clientHeight+document.documentElement.scrollTop){
		// 				item.setAttribute('src',item.getAttribute('origin'));
		// 				destory.call(this,index)
		// 			}
		// 		})
		// 		console.log('去抖动中');
		// 	},300)
		//   console.log('监听中')
		// }

	// 	// 完成后销毁
	// 	function destory(index){
	// 		imgList.splice(index,1)
	// 		if(imgList.length==0){
	// 		document.removeEventListener('scroll',lazyload);
	// 		}
	// 	} 
	


	// var idx;
	// window.addEventListener('scroll',function(){
	// 	if(idx==false){
	// 		return
	// 	}
	// 	idx=false
	// 	setTimeout(()=>{
	// 		console.log('a');
	// 		idx=true
	// 	},300)
	// })
	//  imgList.forEach((item,index)=>{
	// 	index.src == index['data-origin']
	// })
</script>
</html>